<template>
  <div class="edit-template">
    <div class="inner">
      <div class="title">
        编辑模板<i @click="close"></i>
      </div>
      <div class="content">
        <div class="row">
          <label for="">模板名称</label>
          <span>{{template_name}}</span>
<!--          <input placeholder="请输入模板名称" v-model="template_name" readonly type="text"/>-->
        </div>
        <div class="row">
          <label for="">模板状态</label>
          <el-select v-model="template_state" placeholder="请选择">
            <el-option
              label="禁用"
              value="0">
            </el-option>
            <el-option
              label="启用"
              value="1">
            </el-option>
          </el-select>
        </div>
        <div class="row">
          <label for="">里程碑</label>
          <div class="tree">
            <vuescroll :ops="ops">
              <el-tree
                :data="template_tree"
                node-key="id"
                default-expand-all
                :props="props"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                @node-click="dept_click"
                :render-content="renderContent">
              </el-tree>
            </vuescroll>
          </div>
        </div>
        <div class="btn" @click="save_template">保存</div>
      </div>
    </div>
    <!--    添加里程碑信息的框-->
    <div class="set-milepost" v-if="is_show_set_milepost">
      <div class="set-milepost-inner">
        <div class="title">
          <h3>里程碑信息</h3>
          <i class="ic_close" @click="is_show_set_milepost=false"></i>
        </div>
        <div class="form">
          <el-form ref="milepostForm" label-width="144px" class="demo-ruleForm">
            <el-form-item label="名称" prop="shortName">
              <el-input placeholder="请输入里程碑名称" v-model="milepostForm_name"></el-input>
            </el-form-item>
            <el-form-item class="text-right">
              <div class="save-btn" @click="saveMilepost">保存</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  export default {
    name: "EditTemplate",
    components: {
      vuescroll
    },
    props:{
      groupId:{
        type:String,
        default:'',
      }
    },
    data() {
      return {
        is_show_set_milepost:false,
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '40px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        template_details:{},
        template_name:'',
        template_state:'',
        template_tree:[],
        props:{label:'name'},
        parentId:'',//当前需要添加里程碑的上级id
        cur_id:'',//当前需要编辑的里程碑id
        milepostForm_name:'',//模板里程碑的名称
      }
    },
    created() {
     this.get_template_details();
    },
    methods: {
      close(){
        this.$emit('close');
      },
      get_template_details() {
        this.$http.get('plan/plan/temp/info', {
          params: {
            groupId: this.groupId
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.template_details = res.data;
            this.template_state=res.data.state+'';
            this.template_name=res.data.name;
            this.template_tree=[res.data];
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      dept_click(){

      },
      //添加
      append(data) {
        this.cur_id="";
        this.milepostForm_name="";
        this.parentId=data.id;
        this.is_show_set_milepost=true;
        return;
        const newChild = {id: id++, name: 'testtest', children: []};
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      //删除
      remove(node, data) {
        let _this=this;
        this.$confirm('删除该里程碑, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$http.post('plan/plan/temp/delete',{id:data.id}).then(res=>{
            if(res.statusCode==200){
              _this.$message.success('删除成功');
              _this.get_template_details();
            }else {
              _this.$message.error(res.statusMsg);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        return;
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      //编辑
      edit(node, data) {
        this.parentId='';
        this.milepostForm_name=data.name;
        this.cur_id=data.id;
        this.is_show_set_milepost=true;
      },
      //保存里程碑
      saveMilepost(){
        if(this.cur_id){
          //编辑
          this.$http.post('plan/plan/temp/update',{
            id: this.cur_id,
            name: this.milepostForm_name,
          }).then(res=>{
            if(res.statusCode==200){
              this.is_show_set_milepost=false;
              this.get_template_details();
            }else {
              this.$message.error(res.statusMsg);
            }
          })
        }else {
          //新增
          this.$http.post('plan/plan/temp/add',{
            parentId:this.parentId,
            name:this.milepostForm_name
          }).then(res=>{
            if(res.statusCode==200){
              this.is_show_set_milepost=false;
              this.get_template_details();
            }else {
              this.$message.error(res.statusMsg);
            }
          })
        }
      },
      //保存模板
      save_template(){
        this.$http.post('plan/plan/temp/updateState',{
          groupId: this.groupId,
          state: this.template_state
        }).then(res=>{
          if(res.statusCode==200){
            this.$message.success('保存成功');
          }else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      renderContent(h, {node, data, store}) {
        console.log(node);
        return (
          <span class="custom-tree-node">
          <span class="text">{node.label}</span>
          <span class="btns">
          <div class="btn icon_edit" v-show={node.level!=1?true:false} on-click={ () => this.edit(node, data) }></div>
        <div class="btn icon_add"  on-click={ () => this.append(data) }></div>
        <div class="btn icon_del"  v-show={node.level!=1?true:false} on-click={ () => this.remove(node, data) }></div>
        </span>
        </span>);
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .edit-template {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .inner{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 670px;
      height: 704px;
      border-radius: 6px;
      background-color: #ffffff;
      .title {
        font-size: 16px;
        color: #454a55;
        position: relative;
        height: 48px;
        font-weight: 600;
        padding: 32px 32px 32px 32px;

        > i {
          background-size: 16px 17px;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          width: 16px;
          height: 17px;
          background-image: url("../../assets/img/close_icon.png");
          top: 32px;
          right: 32px;
          cursor: pointer;
        }
      }
      .content {
        .row {
          overflow: hidden;
          margin-bottom: 24px;

          label {
            float: left;
            width: 143px;
            line-height: 38px;
            padding-left: 63px;
            font-size: 14px;
          }
          span{
            float: left;
            line-height: 38px;
            font-size: 14px;
          }
          input {
            float: left;
            width: 480px;
            height: 38px;
            line-height: 38px;
            border: none;
            background-color: #F2F6F9;
            border-radius: 6px;
            text-indent: 16px;
            font-size: 14px;
          }

          input:focus {
            border: 1px solid #409EFF;
          }
          .tree{
            width: 480px;
            height: 430px;
            float: left;
          }
        }

        .btn {
          float: right;
          width: 88px;
          height: 32px;
          line-height: 32px;
          background-color: #0755DB;
          border-radius: 6px;
          text-align: center;
          color: #ffffff;
          margin-right: 48px;
          cursor: pointer;
        }
      }
    }
    .set-milepost {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.5);

      .set-milepost-inner, .custom-date-inner {
        width: 608px;
        height: 200px;
        border-radius: 6px;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

        .title {
          line-height: 80px;
          height: 80px;
          padding: 0 32px;
          font-size: 16px;
          color: #454A55;
          position: relative;

          .ic_close {
            position: absolute;
            background-image: url("../../assets/img/close_icon.png");
            width: 16px;
            height: 16px;
            background-size: cover;
            background-repeat: no-repeat;
            right: 32px;
            top: 32px;
            cursor: pointer;
          }
        }

        .form {
          padding-right: 64px;

          .save-btn {
            display: inline-block;
            border-radius: 6px;
            width: 88px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
            background-color: #0755db;
            color: #FFFFFF;
          }

          .add-manager {
            position: absolute;
            width: 38px;
            height: 38px;
            background-image: url("../../assets/img/project/add_manager_icon1.png");
            background-size: 38px 38px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
          }

          .select-manager {
            padding-left: 50px;
          }
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .edit-template {
    .row {
      .el-input__inner {
        width: 480px !important;
        background-color: #f2f6f9;
        border-color: #f2f6f9;
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .edit-template{
    .custom-tree-node{
      width: 100%;
      position: relative;
      .btns{
        position: absolute;
        right: 24px;
        top: 0;
        .btn{
          display: inline-block;
          width: 12px;
          height: 12px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          margin-left: 18px;
        }
        .icon_add{
          background-image: url("../../assets/img/ht/member/ic_add.png");
        }
        .icon_edit{
          background-image: url("../../assets/img/ht/member/ic_edit.png");
        }
        .icon_del{
          background-image: url("../../assets/img/ht/member/ic_deletefill.png");
        }
      }
      font-size: 14px;
    }
    .el-tree-node__content{
      height: 48px;
    }
  }
</style>
